<template>
  <el-dialog v-model="dialog.visible" :title="dialog.title" width="50%" @close="close()"  :close-on-click-modal="false">
    <div>内容22</div>
    <div>{{dialog.visible}}</div>
    <el-button type="primary" @click="close()">关闭</el-button>

  </el-dialog>
</template>

<script setup>
// 定义属性
import {onMounted, reactive, ref, watch} from "vue";

const  props = defineProps({
// 这里使用 modelValue ，这样就可以在父组件直接使用 v-model 双向绑定
// 如果不写 modelValue ，那么父组件中，就必须使用 v-model:属性名称 绑定数据
  modelValue: {
    type:  Boolean,
    default:  false
  },

});
const dialog = ref({
  visible: false,
  title: '编辑',
})
// 初始化方法
onMounted(()   =>   {
  initialValue();
});
// 监听属性变化
watch(()   =>   props.modelValue, (newVal) => {
  initialValue(newVal);
  console.log('dialog.value===>', dialog.value);
}, {deep:   true});
// 初始化变量值
const   initialValue =   (visible) =>   {
  dialog.value.visible =  props.modelValue;
  dialog.value.title = props.title;
};


// 定义事件，这里一定要有 update:modelValue 事件，用于通知父组件更新 v-model 的数据
const emits = defineEmits(['update:modelValue' ],'close');

function close() {
  emits('update:modelValue', false);
  dialog.value.visible =   false;
  // emits('close',   false);
  console.log('关闭了', dialog.value.visible )
}
// // 监听属性变化
// watch(() => props.modelValue, (newVal) => {
//   // 通知父组件，数据发生变化
//   emits('update:modelValue', newVal);
//   console.log('数据发送变化===>', newVal);
// }, {deep: true,immediate:true});

</script>